import { Link, useNavigate } from "react-router-dom"
import { Card, Breadcrumb, Form, Button, Radio, DatePicker, Select, Popconfirm, message } from "antd"

// 导入资源
import { Table, Tag, Space } from "antd"
import { EditOutlined, DeleteOutlined } from "@ant-design/icons"
import img404 from "@/assets/error.png"
import { useChannel } from "@/hooks/useChannel.js"
import { useEffect, useState } from "react"
import { deleteArticleById, getArticlesList } from "@/api/article.js"

const { Option } = Select
const { RangePicker } = DatePicker

export default function Article() {
    const { channelsList } = useChannel()
    // 准备列数据
    // 定义枚举状态
    const status = {
        1: <Tag color="warning">待审核</Tag>,
        2: <Tag color="success">审核通过</Tag>
    }

    const columns = [
        {
            title: "封面",
            dataIndex: "cover",
            width: 120,
            render: cover => {
                return <img src={cover.images[0] || img404} width={80} height={60} alt="" />
            }
        },
        {
            title: "标题",
            dataIndex: "title",
            width: 220
        },
        {
            title: "状态",
            dataIndex: "status",
            render: data => status[data]
        },
        {
            title: "发布时间",
            dataIndex: "pubdate"
        },
        {
            title: "阅读数",
            dataIndex: "read_count"
        },
        {
            title: "评论数",
            dataIndex: "comment_count"
        },
        {
            title: "点赞数",
            dataIndex: "like_count"
        },
        {
            title: "操作",
            render: data => {
                return (

                  <Space size="middle">
                      <Button type="primary" shape="circle" icon={<EditOutlined />}
                              onClick={() => navigate(`/publish?id=${data.id}`)} />
                      <Popconfirm
                        title="删除文章！"
                        description="您确认要删除当前文章吗？"
                        onConfirm={() => delArticle(data)}
                        okText="确认"
                        cancelText="取消"
                      >
                          <Button
                            type="primary"
                            danger
                            shape="circle"
                            icon={<DeleteOutlined />}
                          />
                      </Popconfirm>
                  </Space>
                )
            }
        }
    ]

    // 是否显示loading效果
    const [isLoading, setIsLoading] = useState(false)

    // 获取文章列表
    const [queryObject, setQueryObject] = useState({
        status: "",
        channel_id: "",
        begin_pubdate: "",
        end_pubdate: "",
        page: "1",
        per_page: "3"
    })
    const [articleList, setArticleList] = useState([])
    const [count, setCount] = useState(0)
    useEffect(() => {
        async function getArticleList() {
            setIsLoading(true)
            const res = await getArticlesList(queryObject)
            setArticleList(res.data.data.results)
            setCount(res.data.data.total_count)
            setIsLoading(false)
        }

        getArticleList()
    }, [queryObject])

    // 筛选功能
    const onFinishForm = (values) => {
        setQueryObject({
            ...queryObject,
            status: values.status,
            channel_id: values.channel_id,
            begin_pubdate: values.date[0].format("YYYY-MM-DD"),
            end_pubdate: values.date[1].format("YYYY-MM-DD")
        })
    }
    // 分页功能
    const onPageChange = (page) => {
        // 修改参数依赖项，引发数据的重新获取列表渲染
        setQueryObject({
            ...queryObject,
            page
        })
    }
    // 删除文章功能
    const delArticle = async (data) => {
        await deleteArticleById(data.id)
        // 更新列表
        setQueryObject({
            ...queryObject
        })
        message.success("文章删除成功！")
    }
    // 编辑文章功能
    const navigate = useNavigate()

    return (
      <div className="article-container">
          <Card
            title={
                <Breadcrumb items={[
                    { title: <Link to={"/"}>首页</Link> },
                    { title: "文章列表" }
                ]} />
            }
            style={{ marginBottom: 20 }}
          >
              <Form initialValues={{ status: "" }} onFinish={onFinishForm}>
                  <Form.Item label="状态" name="status">
                      <Radio.Group>
                          <Radio value={""}>全部</Radio>
                          <Radio value={0}>草稿</Radio>
                          <Radio value={2}>审核通过</Radio>
                      </Radio.Group>
                  </Form.Item>

                  <Form.Item label="频道" name="channel_id">
                      <Select
                        placeholder="请选择文章频道"
                        style={{ width: 150 }}
                      >
                          {channelsList.map(item => <Option key={item.id} value={item.id}>{item.name}</Option>)}
                      </Select>
                  </Form.Item>

                  <Form.Item label="日期" name="date">
                      {/* 传入locale属性 控制中文显示*/}
                      <RangePicker />
                  </Form.Item>

                  <Form.Item>
                      <Button type="primary" htmlType="submit" style={{ marginLeft: 40 }}>
                          筛选
                      </Button>
                  </Form.Item>
              </Form>
          </Card>
          {/*表格区域*/}
          <Card title={`根据筛选条件共查询到 ${count} 条结果：`}>
              <Table rowKey="id" columns={columns} dataSource={articleList} loading={isLoading} pagination={{
                  total: count,
                  pageSize: queryObject.per_page,
                  pageSizeOptions: [5, 10, 15, 20],
                  onChange: onPageChange
              }}
              />
          </Card>
      </div>
    )
}